/**
* 试卷列表
**/ 

<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[0] }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title[1] }}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>{{ title[1] }}</h3>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>

          <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" ref="tree" @node-click="find">
          </el-tree>
        </el-aside>
        <el-main>
          <el-container>
            <p />
            <div>
              <el-form :inline="true" :model="formInline" class="list-search">

                <el-form-item label="试卷名称：">
                  <el-input size="mini" v-model="formInline.Pname" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="试卷难度：">
                  <el-input size="mini" v-model="formInline.Pdiff" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="试卷状态：">
                  <el-select size="mini" style="width: 120px;" v-model="formInline.Pstatus" placeholder="请选择" clearable>
                    <el-option label="已启用" value="y"></el-option>
                    <el-option label="未启用" value="n"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" type="primary" icon="el-icon-search" @click="search">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="mod-btnbox">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="addPaper">新增试卷</el-button>
            </div>

            <el-main>
              <template>
                <el-table ref="multipleTable" :data="tableData" highlight-current-row v-loading="loading" border
                  element-loading-text="拼命加载中" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange" height="450">
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column align="center" sortable prop="id" label="试卷编号" width="120">
                  </el-table-column>
                  <el-table-column prop="name" label="试卷名称" align="center">
                  </el-table-column>
                  <el-table-column prop="diffculty" label="试卷难度" align="center">
                  </el-table-column>
                  <el-table-column prop="status" label="试卷状态" align="center" width="120">
                    <template slot-scope="scope">
                      <el-switch v-model="scope.row.status == 'y' ? nshow : fshow" active-color="#13ce66"
                        inactive-color="#ff4949" @change="editType(scope.$index, scope.row)">
                      </el-switch>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-row>
                        <el-button size="mini" type="danger" plain @click="deleteP(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button size="mini" type="primary" plain @click="showpaper(scope.$index, scope.row)">详情
                        </el-button>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-main>
            <el-footer>
              <!-- 分页组件 -->
              <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 导入组件
import { pList, PaperList, deletePbyid,changePstatus } from '../../api/paperMG'
//分页组件
import Pagination from '../../components/Pagination'
// 导出模块
// 导出模块
export default {
  // 模块名字
  name: "template",
  // 模块数据
  data() {
    //数据  
    return {
      //面包屑标签
      title: '',
      //树形菜单过滤文本
      filterText: '',
      //树形菜单题库分类数据
      data: [],
      //树形菜单属性
      defaultProps: {
        children: 'paperCategories',
        label: 'name',
      },
      formInline: {
        page: 1,
        limit: 10,
        Pname: '',
        Pdiff: '',
        Pstatus: '',
        //树形菜单编号数组
        ids: []
      },
      //表格中的数据
      tableData: [],
      multipleSelection: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      nshow: true, //switch开启
      fshow: false, //switch关闭
    }
  },
  // 注册组件
  components: {
    // headerComponent
    Pagination,
  },
  // 监听指定值，只有指定值变化，才会触发
  watch: {
    //监听树形菜单的值
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    addPaper() {
      this.$router.push({
        path: '/text_paper/addPaper/addPaper',
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    find(data) {
      console.log(data);
      this.formInline.ids = []
      this.getIds(data)
      this.getdata(this.formInline);
    },
    //根据题库分类树形菜单传来的分类集合生成包含该分类以及其子分类下的id数组
    getIds(parameter) {
      this.formInline.ids.push(parameter.id)
      for (let i = 0; i < parameter.paperCategories.length; i++) {
        if (parameter.paperCategories[i].paperCategories.length > 0) {
          this.getIds(parameter.paperCategories[i])
        } else {
          this.formInline.ids.push(parameter.paperCategories[i].id)
        }
      }
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    // 表格变动处理
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //列表操作
    deleteP(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 删除
          deletePbyid(row.id)
            .then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '数据已删除!',
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg,
                })
              }
            })
            .catch((err) => {
              this.loading = false
              this.$message.error('数据删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！',
          })
        })
    },
    showpaper(index, row) {
      let id = row.id
      // 读取详情
      this.$router.push({
        path: '/text_paper/paperView',
        query:{id},
      })
    },
    getdata(parameter) {
      this.loading = true,
        /***
         * 调用接口，渲染题目列表
         */
        PaperList(parameter)
          .then((res) => {
            this.loading = false
            if (res.data.code != 200) {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            } else {
              this.tableData = res.data.data.list
              //console.log(this.tableData);
              // 分页赋值
              this.pageparm.currentPage = this.formInline.page
              this.pageparm.pageSize = this.formInline.limit
              this.pageparm.total = res.data.data.total
            }
          })
          .catch((err) => {
            this.loading = false
            this.$message.error('获取题目列表失败，请稍后再试！')
          })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 修改试卷状态
    editType: function(index, row) {
      this.loading = true
      let parm = {
        status: '',
        id: '',
      }
      parm.id = row.id
      let status = row.status
      if (status == 'y') {
        parm.status = 'n'
      } else {
        parm.status = 'y'
      }
      changePstatus(parm).then(res => {
        this.loading = false
        if (res.data.code != 200) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.formInline)
        }
      })
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {

  },
  // 创建完毕状态(里面是操作)
  created() {
    this.title = this.$route.name.split('/'),
      pList().then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data
        }
      }),
      this.getdata(this.formInline)
  },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() { },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { }
};
</script>

// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.user-search {
  margin-top: 20px;
}
</style>
